<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--可插入音频和视频文件-->
<audio controls id="audio">
    <source src="hlw.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 元素。
</audio>
<p>总时长：<span id="allTime"></span>&nbsp;&nbsp;当前时长：<span id="curTime"></span></p>

    <div>
        可以在audio之间放置文本内容，这些文本信息将会被显示在那些不支持 <audio> 标签的浏览器中。 <br>
    </div>

</body>
<script>
    var audio = document.getElementById("audio");
    var allTime = document.getElementById("allTime");
    var curTime = document.getElementById("curTime");

    var time = null;  // 时长
    var timer = null; // 定时器

    audio.addEventListener("loadedmetadata",function () {  // 加载完成后
        var m = parseInt(parseInt(audio.duration)/60);
        var s = parseInt(audio.duration)-m*60;
        time = (m<10?"0"+m:m)+":"+(s<10?"0"+s:s);
        allTime.innerHTML = time;
    })
    audio.addEventListener("playing",function () { // 播放时
        timer = setInterval(function () {
            var m = parseInt(parseInt(audio.currentTime)/60);
            var s = parseInt(audio.currentTime)-m*60;
            time = (m<10?"0"+m:m)+":"+(s<10?"0"+s:s);
            curTime.innerHTML = time;
        },1000);
    })

    audio.addEventListener("ended",function () { // 播放结束时
        clearInterval(timer);
        alert("结束了");
    })
</script>
</html>